<template>
	<view>
		<view class="withDrawalBox">
			<view class="withSrawalBoxName">
				提现金额
			</view>
			<view class="withDrawalNumber">
				<input type='number' placeholder='请输入提现金额' placeholder-class='placeholder'
					v-model="withdrawAmount"></input>
			</view>
		</view>
		<view class="withDrawalItem">
			<view class="withDrawalItemCont">
				<view>顾客编号</view>
				<view>{{memberCode}}</view>
			</view>
			<view class="withDrawalItemCont">
				<view>奖励积分</view>
				<view>{{bonusAccount}}</view>
			</view>
			<view class="withDrawalItemCont">
				<view>短信验证码</view>
				<view style="width:calc(100% - 300rpx);position: relative;">
					<input placeholder="请输入验证码" v-model="smsCode" />
					<view class="codeMsgBox" @click="codeFun" v-if="isClickSMS==false">
						<text v-if="smsMessTxtNumber==60">获取验证码</text>
						<text v-if="smsMessTxtNumber<60">再次获取</text>
					</view>
					<view class="codeMsgBox" v-if="isClickSMS!==false">剩余{{smsMessTxtNumber}}s</view>
				</view>
			</view>
		</view>
		<view class="submitButton" @click="withdraw">
			提交
		</view>
		<view class="msgBox">
			尊敬的会员：为了保障您的资金安全，在申请提现时，请务必确保申请人的姓名与收款人的姓名一致。如有不符，请尽快联系公司市场部进行变更。谢谢您的配合。
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupBox">
				<view class="popupBoxTitle">支付密码</view>
				<view>
					<input v-model="payPassword" type="password" placeholder="请输入支付密码" />
				</view>
				<view class="modifyBnt" @click="payFor">提交</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getMemberInfo,
		getWalletBalance,
		getWithdrawSmsCode,
		setApplyWithdrawSubmit
	} from '@/api/directSelling.js';
	export default {
		data() {
			return {
				withdrawAmount: "",
				memberCode: "",
				bonusAccount: "",
				smsCode: "",
				isClickSMS: false,
				smsMessTxtNumber: 60,
				smsMessFunc: null,
				payPassword: "",
				isDisable: false,
			}
		},
		onShow() {
			this.memberCode=uni.getStorageSync('userInfo').memberCode || "";
			//this.createTlMember(); //判断用户状态
			getWalletBalance().then(res => {
				let data = res.data;
				this.bonusAccount = data.bonusAccount;
			})
		},
		created() {
			this.isDisable = false;
		},
		methods: {
			//获取用户基本信息
			codeFun() {
				this.isClickSMS = true;
				//this.getSmsCodeFunc();
				getWithdrawSmsCode().then(res => {
					this.$util.Tips({
						title: '获取验证码成功！'
					});
					this.isClickSMS = true;
					this.getSmsCodeFunc();
				})
			},
			getSmsCodeFunc() {
				this.smsMessTxtNumber = 60;
				this.smsMessFunc = setInterval(() => {
					if (this.smsMessTxtNumber > 0) {
						this.smsMessTxtNumber = this.smsMessTxtNumber - 1;
					} else {
						clearInterval(this.smsMessFunc);
						this.smsMessFunc = null;
						this.isClickSMS = false;
					}
				}, 1000)
			},
			withdraw() {
				if (null == this.smsCode || this.smsCode == '') {
					this.$util.Tips({
						title: '请填写短信验证码！'
					});
					return;
				}
				const reg = /(^[0-9]{1,}$)|(^[0-9]{1,}[\.]{1}[0-9]{1,2}$)/
				if (!reg.test(this.withdrawAmount)) {
					this.$util.Tips({
						title: '请填写数字，两位小数！'
					});
				}
				this.payPassword = "";
				this.$refs.popup.open();
			},
			payFor() {
				if (this.payPassword !== '') {
					if (!this.isDisable) {
						let parse="?withdrawAmount="+this.withdrawAmount+"&payPassword="+this.payPassword+"&smsCode="+this.smsCode;
						setApplyWithdrawSubmit(parse).then(res => {
							if (res) {
								console.log(res)
								this.$refs.popup.close();
								let data = res.data;
								if (res.meta.success == true) {
									this.isDisable = false
									this.$util.Tips({
										title: '提现成功！'
									});
									setTimeout(()=>{
										uni.navigateBack();
									},1500)
								} else {
									this.$util.Tips({
										title: res.data.msg
									});
								}
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.withDrawalBox {
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;

		.withSrawalBoxName {
			line-height: 100rpx;
			font-size: 34rpx;
			color: #000;
			font-weight: bold;
		}

		.withDrawalNumber {
			width: 100%;
			height: 80rpx;
			border: 1px solid #eee;
			border-radius: 15rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			uni-input {
				width: 100%;
				height: 100%;
			}
		}
	}

	.withDrawalItem {
		.withDrawalItemCont {
			height: 100rpx;
			background: #fff;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;

			.codeMsgBox {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 28rpx;
				color: $theme-color;
				font-weight: bold;
			}
		}
	}

	.submitButton {
		width: 90%;
		margin: 100rpx auto;
		height: 90rpx;
		background: $theme-color;
		border-radius: 30rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
	}

	.msgBox {
		padding: 0 30rpx;
		box-sizing: border-box;
		line-height: 40rpx;
		font-size: 30rpx;
		color: #999;
		text-indent: 0px;
	}

	.popupBox {
		width: 100%;
		height: 400rpx;
		background: #fff;
		font-size: 28rpx;
		border-radius: 10rpx 10rpx 0 0;

		.popupBoxTitle {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			color: #282828;
		}

		uni-input {
			width: 90%;
			height: 100rpx;
			border: 1px solid #ccc;
			margin: 0 auto;
			border-radius: 15rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
	}

	.modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 700rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
		background: #108ccf;
	}
</style>
